<template>
  <el-container>
    <el-aside width="200px">
      <div v-for="item in hostList" :key="item.name" class="infinite-list-item" @click="addTab(item)">{{
          item.name
        }}
      </div>
    </el-aside>
    <el-main>
      <!--      <el-button @click="handleTabsEdit('60' )">关闭</el-button>-->
      <!--      <xterm v-bind="tabList[0]" ref="com"></xterm>-->
      <el-tabs
          v-model="activeTab"
          type="border-card"
          closable
          class="demo-tabs"
          @tab-remove="handleTabsEdit"
      >
        <el-tab-pane
            v-for="item in tabList"
            :key="item.name"
            :label="item.title"
            :name="item.name">
          <div>
            <xterm v-bind="item" :ref="item.refFn"></xterm>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>


</template>

<script setup>
import {ref} from 'vue'
import Xterm from "@/components/Xterm.vue";

const activeTab = ref(0)

const hostList = ref([])
const tabList = ref([])

const com = ref(null)

const getDivRef = (e, id) => {
  id.ref = e
}
const handleTabsEdit = tabName => {
  for (let i = tabList.value.length - 1; i >= 0; i--) {
    let element = tabList.value[i];
    if (element.name === tabName) {
      // 关闭xterm
      element.ref.disconnect()
      tabList.value.splice(i, 1)
    }
  }

}
const load = () => {
  hostList.value.push({name: "60", ip: "192.168.1.60", username: 'root', password: ""})
  hostList.value.push({name: "58", ip: "192.168.7.58", username: 'admin1', password: "admin123"})
}

const addTab = host => {
  let item = {
    title: host.name,
    name: tabList.value.length,
    content: host.ip,
    ...host,
    ref: ref(null),
    refFn(e) {
      item.ref = e
    }
  }
  if (tabList.value.every(x => x.name !== item.name)) {
    tabList.value.push(item)
  }
  activeTab.value = item.name
}

load()

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
//text-align: center; color: #2c3e50; //margin-top: 60px;
}

.infinite-list-item {
  line-height: 40px;
  text-indent: 40px;
  background-color: #42b983;
}

.infinite-list-item:hover {
  background-color: #88d5b0;
}
</style>
